<template>
    <div class="login">
        <el-row style="width: 100%">
            <el-col
                :xs="{ offset: 2, span: 20 }"
                :sm="{ offset: 6, span: 12 }"
                :md="{ offset: 7, span: 10 }"
                :lg="{ offset: 8, span: 8 }"
                :xl="{ offset: 9, span: 6 }"
            >
                <div class="box">
                    <h1 class="title">国醇酒业集团有限公司</h1>
                    <el-form @keyup.enter="submitForm" ref="formRef" size="large" :model="viewData.form" :rules="rules">
                        <el-form-item prop="username">
                            <el-input
                                v-model="viewData.form.username"
                                :prefix-icon="User"
                                placeholder="请输入用户名称"
                            />
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input
                                v-model="viewData.form.password"
                                :prefix-icon="Key"
                                placeholder="请输入登录密码"
                                type="passWord"
                                show-password
                            />
                        </el-form-item>
                        <template v-if="setting.code">
                            <el-form-item prop="code">
                                <el-input
                                    placeholder="请输入验证码"
                                    :prefix-icon="PictureFilled"
                                    v-model="viewData.form.code"
                                >
                                    <template #suffix>
                                        <CodeView v-model="viewData.form.code_id" />
                                    </template>
                                </el-input>
                            </el-form-item>
                        </template>
                        <div class="btn">
                            <el-button style="width: 100%" type="primary" @click="submitForm">登录</el-button>
                        </div>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import CodeView from '@/pages/login/code.vue'
import { User, Key, PictureFilled } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { useSetting, useSystem } from '@/store'
import { storeToRefs } from 'pinia'
import { system } from '@/api'
import router from '@/routers'

const useUserInfo = useSystem()
const useSet = useSetting()
const { setting } = storeToRefs(useSet)
const formRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    username: [{ required: true, message: '请输入登录账户' }],
    password: [{ required: true, message: '请输入登录密码' }],
})

const viewData = reactive({
    form: {
        username: '',
        password: '',
    },
})

const submitForm = async () => {
    try {
        await formRef.value!.validate()
    } catch (e) {
        return
    }
    try {
        const res = await system.login(viewData.form)
        useUserInfo.setUserInfo(res.data!)

        await router.push({ path: '/admin' })
    } catch (e) {}
}
</script>

<style scoped lang="scss">
.login {
    width: 100%;
    height: 100%;
    background-image: url('@/assets/image/login_gb_7.png');
    background-size: cover;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    .box {
        padding: 2rem;
        background-color: #ffffff;
        border-radius: 0.5rem;
        text-align: center;
        .logo {
            margin-bottom: 1rem;
        }
        .title {
            color: var(--el-font-family);
            padding-bottom: 1rem;
            font-size: 2rem;
        }
    }
}
</style>
